<?php use_stylesheet('flipbook/style.css') ?>

<?php if($using_ie){ ?>
<?php use_stylesheet('flipbook/page-styles-ie.css') ?>
<?php }else{ ?>
<?php use_stylesheet('flipbook/page-styles.css') ?>
<?php } ?>

<?php use_stylesheet('cursor/cursor.css') ?>

<?php use_javascript('jquery/flipbook/swfobject2.js') ?>
<?php use_javascript('jquery/flipbook/jquery.easing.1.3.js') ?>
<?php use_javascript('jquery/flipbook/turn.js') ?>
<?php use_javascript('jquery/flipbook/flipbook.js') ?>
<?php use_javascript('jquery/flipbook/jquery.doubletap.js') ?>
<?php use_javascript('jquery/flipbook/jquery.color.js') ?>


<?php $url = url_for('@homepage?p='.$p, true); ?>

<input type="hidden" id="hdP" name="hdP" value="<?php echo $p; ?>" />

<div id="flipbook-container-1" class="flipbook-container">
    <!-- Flip book -->
    <div id="flipbook-1" class="flipbook">
        <!-- Start Flip Book Pages -->

        <!-- Cover -->
        <div class="fb-page">
            <div class="page-content">
                <div class="container">
                    <?php echo image_tag('/uploads/pages/cover.jpg','class="bg-img"') ?>
                    <?php echo image_tag('/uploads/pages/cover-zoomed.jpg','class="bg-img zoom-large"') ?>
                </div>
            </div>
        </div>
        <!-- end Cover -->
    <?php foreach($pages as $idx => $page){ ?>
      <?php //if($idx>0){ ?>
        <?php if($page["page"]%2==0){ ?>
        <!-- double -->
        <div class="fb-page double">
            <div class="page-content">
                <div class="container">
                    <div class="preview-content features left">
                        <?php //echo $page["filename"] ?>
                        <?php echo image_tag('/uploads/pages/'.$page["filename"],'size=100%x100%') ?>
                    </div>
        <?php }else{ ?>
                    <div class="preview-content features right">
                        <?php //echo $page["filename"] ?>
                        <?php echo image_tag('/uploads/pages/'.$page["filename"],'size=100%x100%') ?>
                    </div>
                </div>
            </div>
        </div>
        <!-- end double -->
        <?php } ?>
      <?php //} ?>
    <?php } ?>
        <!-- Back Cover -->
        <div class="fb-page">
            <div class="page-content">
                <div class="container">
                    <?php echo image_tag('/uploads/pages/back-cover.jpg','class="bg-img"') ?>
                    <?php echo image_tag('/uploads/pages/back-cover-zoomed.jpg','class="bg-img zoom-large"') ?>
                </div>
            </div>
        </div>
        <!-- end Back Cover -->
        <!-- end Flip Book Pages -->

    </div> <!-- end Flip Book -->

    <!-- Flip Book Navigation -->
    <div id="fb-nav-1" class="fb-nav mobile spread" style="display: none!important;">
        <ul>
            <!-- <li class="toc round">Table Of Content</li> -->
            <li class="zoom round search gradient">Zoom</li>
            <!--li class="slideshow round">Slide Show</li>
            <li class="show-all round">Show All Pages</li-->
        </ul>
    </div> <!-- end FLip Book Nav -->
</div> <!-- end Flip Book Container -->

<div style="position: relative;">
    <div id="share-buttons" style="position: absolute; top: 20px; left: 180px;"></div>
</div>
<script type="text/javascript">
$(document).ready(function(){
    var url = "<?php echo $url; ?>";
    reload_share_buttons(url);
});
function reload_share_buttons(url){
    $.ajax({
        url: "<?php echo url_for('@ajax_load_share_buttons') ?>",
        type: "post",
        data: "url="+url,
        cache: false,
        success: function(html){
            $("#share-buttons").html(html);
        }
    });
}
</script>